<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>详情页</title>
    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <link rel="stylesheet" th:href="@{/css/header.css}">
    <link rel="stylesheet" th:href="@{/css/jingdian.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/comment/responsive.css}">
    <link rel="stylesheet" th:href="@{/css/comment/style.css}">

    <!-- 浏览器图标 -->
    <link rel="icon" th:href="@{/img/icon/favicon.ico}">
    <style>
        .panel-footer {
            font-size: 12px;
            font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
            _font-family: Tahoma,Arial,Helvetica,STHeiti;
            color: #666;
        }
        a{
            text-decoration: none;
            color: #666666;
        }
        a:hover{
            text-decoration: none;
            color: #0f0f0f;
        }
        a:visited{
            text-decoration: none;
        }
    </style>
    <!--th:inline="javascript" => 启用JavaScript 内联模式-->
    <script th:inline="javascript">
        $(function () {
            updateComment();
            //JSON.parse将接收到的字符串参数解析为JS合法格式
            //var type=JSON.parse([[${type}]]);
            var type=[[${type}]];
            if (type == "search") {//查询结果页
                var key=[[${searchValue}]];
                // var key=decodeURI(key_s);//解码 浏览器使用decode进行编码，所以使用decode解码
                $.get("/search/getResult/"+key,function (data) {
                    var result=data;
                    //console.log(result);
                    var result_ul='<div class="header">\n' +
                        '                        <span>搜索结果</span>\n' +
                        '                        <span class="jg">详情</span>\n' +
                        '                    </div>\n' +
                        '                    <ul id="route">\n' +
                        '                        <!--ajax 填充-->\n';

                    var lis='';
                    for (var i = 0; i < result.youJis.length; i++) {
                        var youJi=result.youJis[i];
                        var li='<li>' +
                            '<div class="img"><img src="'+youJi.images[0].src+'" alt="" class="img-responsive"></div>\n' +
                            '                            <div class="text1">\n' +
                            '                                <p>'+youJi.title+'</p>\n' +
                            '                                <br/>\n' +
                            '                                <p>By '+youJi.user.nickname+'</p>\n' +
                            '                            </div>\n' +
                            '                            <div class="price">\n' +
                            '                                    <p>发表时间：'+youJi.time+'</p>\n' +
                            '                                     <p>\n' +
                            '                                <a href="/detail/youji/'+youJi.yid+'" class="btn btn-primary btn-sm" role="button">查看详情</a>\n' +
                            '                            </div></li>';
                        lis+=li;
                    }

                    for (var i = 0; i < result.jings.length; i++) {
                        var jing=result.jings[i];
                        var li='<li>' +
                            '<div class="img"><img src="'+jing.images[0].src+'" alt="" class="img-responsive"></div>\n' +
                            '                            <div class="text1">\n' +
                            '                                <p>'+jing.jname+'</p>\n' +
                            '                                <br/>\n' +
                            '                                <p>'+jing.position+'</p>\n' +
                            '                            </div>\n' +
                            '                            <div class="price">\n' +
                            '                                    <p>开始时间：'+jing.otime+'</p>\n' +
                            '                                     <p>关闭时间：'+jing.ctime+'</p>\n' +
                            '                                <a href="/detail/jing/'+jing.jid+'" class="btn btn-primary btn-sm" role="button">查看详情</a>\n' +
                            '                            </div></li>';
                        lis+=li;
                    }


                    for (var i = 0; i < result.meiShis.length; i++) {
                        var meishi=result.meiShis[i];
                        var li='<li>' +
                            '<div class="img"><img src="'+meishi.images[0].src+'" alt="" class="img-responsive"></div>\n' +
                            '                            <div class="text1">\n' +
                            '                                <p>'+meishi.mname+'</p>\n' +
                            '                                <br/>\n' +
                            '                                <p>'+meishi.position+'</p>\n' +
                            '                            </div>\n' +
                            '                            <div class="price">\n' +
                            '                                    <p>联系方式：'+meishi.telephone+'</p>\n' +
                            '                                     <p>商家：暂无</p>\n' +
                            '                                <a href="/detail/meishi/'+meishi.mid+'" class="btn btn-primary btn-sm" role="button">查看详情</a>\n' +
                            '                            </div></li>';
                        lis+=li;
                    }

                    for (var i = 0; i < result.jiuDians.length; i++) {
                        var jiudian=result.jiuDians[i];
                        var li='<li>' +
                            '<div class="img"><img src="'+jiudian.images[0].src+'" alt="" class="img-responsive"></div>\n' +
                            '                            <div class="text1">\n' +
                            '                                <p>'+jiudian.name+'</p>\n' +
                            '                                <br/>\n' +
                            '                                <p>'+jiudian.position+'</p>\n' +
                            '                            </div>\n' +
                            '                            <div class="price">\n' +
                            '                                    <p>联系方式：'+jiudian.position+'</p>\n' +
                            '                                     <p>商家：暂无</p>\n' +
                            '                                <a href="/detail/jiudian/'+jiudian.hid+'" class="btn btn-primary btn-sm" role="button">查看详情</a>\n' +
                            '                            </div></li>';
                        lis+=li;
                    }

                    //显示在页面上
                    result_ul+=lis;
                    result_ul+='</ul>';
                    $(".left").html(result_ul);
                    $(".right").html('<img src="/img/side.jpg" class="img-responsive" style="width: 100%;height: 100%">');
                    $("#biaoti").text("搜索结果>"+"'"+key+"'");
                })

            } else{//详情页
                var id=JSON.parse([[${id}]]);
                $.get("/"+type+"/queryDetail",{"id":id},function (data) {
                   var pojo=data;
                   if (type=="jing"){//景点
                       $("#biaoti").html(pojo.jname);
                       $("#title").html(pojo.jname);
                       // $("#title").append('<p><img src="'+pojo.images[pojo.images.length-1].src+'" style="width: 700px;"></p>')
                   }
                   if (type=="meishi"){//美食
                       $("#biaoti").html(pojo.mname);
                       $("#title").html(pojo.mname);
                       // $("#title").append('<p><img src="'+pojo.images[pojo.images.length-1].src+'" style="width: 700px;"></p>')

                   }
                   if (type=="youji"){//游记
                       $("#biaoti").html("商丘游记");
                       $("#title").html(pojo.title);
                       // $("#title").append('<p><img src="'+pojo.images[pojo.images.length-1].src+'" style="width: 700px;"></p>')
                       $("#detail").html(pojo.text);
                   }
                   if (type=="jiudian"){//酒店推荐
                       $("#biaoti").html("酒店推荐");
                       $("#title").html(pojo.name);
                       // $("#title").append('<p><img src="'+pojo.images[pojo.images.length-1].src+'" style="width: 700px;"></p>')
                       $("#detail").html(pojo.content);
                   }
                    $("#detail").html(pojo.detail);
           })}

            //刷新评论
            function updateComment(){
                var bid=JSON.parse([[${id}]]);
                var btype=[[${type}]];
                $.get("/comment/get",{bid:bid,btype:btype},function (data) {
                    var lis=JSON.parse(data);
                    var comment_lis='';
                    var comment_li='';
                    var li;
                    for (var i=0;i<lis.length;i++){
                        li=lis[i];
                        comment_li='<li class="single_comment_area">\n' +
                            '                                    <div class="comment-wrapper d-flex" style="display: flex">\n' +
                            '                                        <!-- Comment Meta -->\n' +
                            '                                        <div class="comment-author">\n' +
                            '                                            <img src="/img/blog-img/imageName_miss.jpg" alt="">\n' +
                            '                                        </div>\n' +
                            '                                        <!-- Comment Content -->\n' +
                            '                                        <div class="comment-content">\n' +
                            '                                            <span class="comment-date text-muted"'+li.commentDate+'</span>\n' +
                            '                                            <h5>'+li.nickname+'</h5>\n' +
                            '                                            <p>'+li.content+'</p>\n' +
                            '                                            <a href="#">Like</a>\n' +
                            '                                            <a class="active" href="#">Reply</a>\n' +
                            '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                </li>';
                        comment_lis+=comment_li;
                    }
                    $("#comments_ol").html(comment_lis);
                    $("#add_comment").text(lis.length);//显示评论数
                    //评论为空
                    if (lis.length==0){
                        $("#comments_ol").html('<li class="single_comment_area">\n' +
                            '                                    <div class="comment-wrapper d-flex" style="display: flex">\n' +
                            '                                        <div class="comment-author">\n' +
                            '                                            <img src="/img/blog-img/18.jpg" alt="">\n' +
                            '                                        </div>\n' +
                            '                                        <div class="comment-content">\n' +
                            '                                            <span class="comment-date text-muted">1 May 2022</span>\n' +
                            '                                            <h5>系统管理员</h5>\n' +
                            '                                            <p>大家快来留下自己的评论吧</p>\n' +
                            '                                            <a href="#">Like</a>\n' +
                            '                                            <a class="active" href="#">Reply</a>\n' +
                            '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                </li>')
                    }
                })
            }

            //点击评论按钮
            $("#post_btn").click(function () {
                //获取已经登录用户的id
                var nickname = $("#nickname").text();
                if (nickname==''){
                    alert("请先登录！")
                    location.href="/user/toLogin";
                    return;
                }
                var url=window.location.href.split("/");
                var bid=url[5];
                var btype=url[4];
                var content=$("#message").val();
                var commentDate=new Date();
                var comment={bid:bid,btype:btype,nickname:nickname,content:content,commentDate:commentDate};
                console.log(comment)
                $.post("/comment/leave",comment,function (data) {
                    //评论成功，异步刷新评论
                    updateComment();
                });
            });
        });
    </script>

    <script>
        $(function () {//获取表单并跳转
            $("#btn").click(function () {
                var key=$("#ipt").val();
                var url="/searchDetail/"+key;
                location.href=url;
            });
        });
    </script>
    <!-- Favicon -->
    <link rel="icon" th:href="@{/img/icon/favicon.ico}">
</head>
<body>

<!--thymeleaf导入页面顶端模板-->
<div th:insert="~{header :: copy}"></div>

<div class="container">
    <div class="page_one">
        <div class="contant">
            <div class="crumbs">
                <img th:src="@{/img/local.png}" style="margin-top: 18px">
                <p><a href="/">商丘旅游</a>><span id="biaoti">详情页</span></p>
            </div>
            <div class="xinxi clearfix">
                <div class="left" style="">
                    <!--ajax填充-->
                    <h1 id="title" style="text-align: center;"></h1>
                    <p id="detail"></p>
                    <div class="comment">
                        <hr>
                        <!--评论开始-->
                        <div class="comment_area section_padding_50 clearfix" >
                            <h4 class="mb-30" id="comments_Num"><span id="add_comment">2</span> 条评论</h4>

                            <ol id="comments_ol">
                                <!--异步填充评论内容 -->
                            </ol>
                        </div>

                        <!-- Leave ATest Comment -->
                        <div class="leave-comment-area section_padding_50 clearfix">
                            <div class="comment-form">
                                <h4 class="mb-30">留下评论</h4>

                                <!-- Comment Form -->
                                <form action="#" method="post">
                                    <div class="form-group">
                                        <textarea class="form-control" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
                                    </div>
                                    <button type="button" class="btn contact-btn" id="post_btn">发表评论</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!--酒店推荐-->
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul style="padding-left: 0px">
                        <a th:each="jiudianImg:${@img.queryAll(jiudianImage)}" th:href="${jiudianImg.href}">
                            <li>
                                <div class="left"><img th:src="${jiudianImg.src}" class="img-responsive" alt=""></div>
                                <div class="right">
                                    <p th:text="${jiudianImg.title}">商丘汇美酒店...</p>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</div>

<div th:insert="~{footer :: copy}"></div>

</body>
</html>
